<template>
  <div class="order-list">
    <!-- 顶部导航 -->
    <van-nav-bar title="我的订单" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <!-- 搜索订单及标题 -->
    <van-search shape="round"
      background="#fff" placeholder="搜索我的订单" />
    <!-- 订单列表 -->
    <van-tabs class="allList" v-if="orderLists.length > 0">
      <van-tab title="全部" >
        <van-cell-group inset v-for="item in orderLists" :key="item.id">
          <van-cell class="product" :border="false">
            <img :src="item?.productInfo.image">
            <p class="title" v-text="item?.productInfo.store_name"></p>
            <span class="count">X{{item?.cart_num}}</span>
          </van-cell>
          <van-cell class="true-price">
            <p class="price">实付:￥{{item?.cart_num * item?.truePrice }}</p>
          </van-cell>
          <van-cell class="other">
            <van-button size="small" round color="grey" plain>评价晒单</van-button>
            <van-button size="small" round color="red" plain>再次购买</van-button>
          </van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab title="待付款">
        <van-cell-group inset v-for="item in orderUnPay" :key="item.id">
          <van-cell class="product" :border="false">
            <img :src="item?.productInfo.image">
            <p class="title" v-text="item?.productInfo.store_name"></p>
            <span class="count">X{{item?.cart_num}}</span>
          </van-cell>
          <van-cell class="true-price">
            <p class="price">实付:￥{{item?.cart_num * item?.truePrice }}</p>
          </van-cell>
          <van-cell class="other">
            <van-button size="small" round color="grey" plain>评价晒单</van-button>
            <van-button size="small" round color="red" plain>再次购买</van-button>
          </van-cell>
        </van-cell-group>     
      </van-tab>
      <van-tab title="待发货">
        <van-cell-group inset v-for="item in orderUnshipped" :key="item.id">
          <van-cell class="product" :border="false">
            <img :src="item?.productInfo.image">
            <p class="title" v-text="item?.productInfo.store_name"></p>
            <span class="count">X{{item?.cart_num}}</span>
          </van-cell>
          <van-cell class="true-price">
            <p class="price">实付:￥{{item?.cart_num * item?.truePrice }}</p>
          </van-cell>
          <van-cell class="other">
            <van-button size="small" round color="grey" plain>评价晒单</van-button>
            <van-button size="small" round color="red" plain>再次购买</van-button>
          </van-cell>
        </van-cell-group>  
      </van-tab>
      <van-tab title="待收货">
        <van-cell-group inset v-for="item in orderUnGet" :key="item.id">
          <van-cell class="product" :border="false">
            <img :src="item?.productInfo.image">
            <p class="title" v-text="item?.productInfo.store_name"></p>
            <span class="count">X{{item?.cart_num}}</span>
          </van-cell>
          <van-cell class="true-price">
            <p class="price">实付:￥{{item?.cart_num * item?.truePrice }}</p>
          </van-cell>
          <van-cell class="other">
            <van-button size="small" round color="grey" plain>评价晒单</van-button>
            <van-button size="small" round color="red" plain>再次购买</van-button>
          </van-cell>
        </van-cell-group>   
      </van-tab>
      <van-tab title="待评价">
        <van-cell-group inset v-for="item in orderUnComment" :key="item.id">
          <van-cell class="product" :border="false">
            <img :src="item?.productInfo.image">
            <p class="title" v-text="item?.productInfo.store_name"></p>
            <span class="count">X{{item?.cart_num}}</span>
          </van-cell>
          <van-cell class="true-price">
            <p class="price">实付:￥{{item?.cart_num * item?.truePrice }}</p>
          </van-cell>
          <van-cell class="other">
            <van-button size="small" round color="grey" plain>评价晒单</van-button>
            <van-button size="small" round color="red" plain>再次购买</van-button>
          </van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab title="已完成">
        <van-cell-group inset v-for="item in orderUnCompleted" :key="item.id">
          <van-cell class="product" :border="false">
            <img :src="item?.productInfo.image">
            <p class="title" v-text="item?.productInfo.store_name"></p>
            <span class="count">X{{item?.cart_num}}</span>
          </van-cell>
          <van-cell class="true-price">
            <p class="price">实付:￥{{item?.cart_num * item?.truePrice }}</p>
          </van-cell>
          <van-cell class="other">
            <van-button size="small" round color="grey" plain>评价晒单</van-button>
            <van-button size="small" round color="red" plain>再次购买</van-button>
          </van-cell>
        </van-cell-group>
      </van-tab>
      <van-empty description="暂时没有宝贝哦~" /> 
    </van-tabs>
  </div>
</template>
<script setup>
import { NavBar as VanNavBar, Button as VanButton, 
  CellGroup as VanCellGroup, Cell as VanCell, Tab as VanTab,
  Empty as VanEmpty } from 'vant'
import { getOrderList } from '@/api/order.js'
import { computed, ref } from '@vue/reactivity';
import { useRouter } from 'vue-router';
const router = useRouter()
// 存储订单的所有信息
let orderLists = ref([])

// 利用计算属性处理数据 
// 待付款
const orderUnPay = computed(() => orderLists.value?.filter((item => item.status === 0)))
// 待发货
const orderUnshipped = computed(() => orderLists.value?.filter((item => item.status === 1)))
// 待收货
const orderUnGet = computed(() => orderLists.value?.filter((item => item.status === 2)))
// 待评价
const orderUnComment = computed(() => orderLists.value?.filter((item => item.status === 3)))
// 已完成
const orderUnCompleted = computed(() => orderLists.value?.filter((item => item.status === 4)))

const initOrderList = async () => {
  const { data } = await getOrderList()
  console.log(data)
  if (data.status !== 200){ return }
  // orderLists = data.data
  // console.log(orderLists)
  let listArr= []
  data.data.forEach(item => {
    listArr = listArr.concat(item.cartInfo)
  })
  orderLists.value = listArr 
  // console.log(listArr)
  console.log(orderLists.value)
}
initOrderList()


const onClickLeft = () =>{
  router.push({
    name: 'user' 
  })
}
</script>
<style lang='scss' scoped>
.van-nav-bar{
  width: 100%;
}
.van-search{
  margin-bottom: 5px;
}
.van-tabs{
  background-color: #f7f7f7;
  :deep(.van-cell-group) {
    margin-top: 15px;
    .product{
      padding: 10px;
      .van-cell__value{
      display: flex;
      align-items: center;
      img{
        width: 70px;
        height: 70px;
        border-radius: 8px;
        margin-right: 8px;
        align-self: center;
      }
      .title{
          width:70%;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient:vertical;
          overflow: hidden;
          padding: 5px;
          font-size: 12px;
      }
      .count{
        font-size: 12px;
        color: #999;
      }
    }
    }
    .true-price{
      .price{
        float: right;
      }
    }
    .other{
      padding: 5px;
      .van-button{
        float: right;
        margin-right: 8px;
      }
    }
  }
 }


</style>
